<template>
	<view class="record_list">
    <mvBar :mysNavConfig="mysNavConfig"></mvBar>
    <view class="bg-img"><image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/recharge-bg.png"></image></view>
    <view class="total-point">
      <p class="title">我的积分</p>
      <p class="num"><text>{{totalPoint}}</text>分</p>
    </view>
		<view class="change-list" v-if="dataList.length > 0">
			<view class="change-item" v-for="item in dataList">
				<view class="item">
					<view class="head">
						<view class="left">{{item.changeReason}}</view>
						<view class="right">{{item.point}}</view>
					</view>
					<view class="bottom">
						<view class="left">{{item.createTime}}</view>
						<view class="right">积分：{{item.afterBalance}}</view>
					</view>
				</view>
			</view>
		</view>
    <empty v-else></empty>
		<!-- <view class="hint" v-else>
        暂无数据!
    </view> -->
	</view>
</template>

<script>
	import mvBar from "@/components/mysNavBar.vue";
  import {getPointList} from "@/api";
  import Empty from "@/components/empty.vue";
  export default {
    components: {Empty, mvBar},
		data() {
			return {
        mysNavConfig: {
          navPadding: true,
          isHome: false,
          navFixed: true,
          navTitle: {
            text: "积分列表",
            color: "#FFFFFF",
            fontSize: "34upx", // px upx rpx
            fontWeight: "500", // blod
          },
          leftIconPath: '/static/header/back.png',
        },
				param: {
					groupId: null,
					memberId: null,
					pageIndex: 1,
					pageSize: 5
				},
				point: 0,
				totalPage: 1,
				dataList: [],
        totalPoint: '',
			};
		},
		onLoad() {
      this.getData();
    },
		methods: {
      async getData() {
        const params = {
          pageNumber: 1,
          pageSize: 9999,
        }
        const res = await getPointList({...params})
        if (res.code === 200 && res.total>0){
          this.dataList = res.rows
          this.totalPoint = this.dataList[0].afterBalance
        }else
          this.totalPoint = 0
      }
    }
	};
</script>

<style lang="scss" scoped>
	.record_list {
		// background: #ffffff;
    .bg-img{
      width: 100%;
      height: 420upx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .total-point{
      padding: 32upx 48upx;
      color: #FFFFFF;
      font-size: 28upx;
      line-height: 44upx;
      .title{
        font-weight: 500;
      }
      .num{
        margin-top: 24upx;
        text{
          font-size: 48upx;
          margin-right: 16upx;
          font-weight: 700;
        }
      }
    }
		.head {
			position: relative;

			image {
				width: 100%;
				height: 340rpx;
			}

			.price {
				top: 195rpx;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				// display: flex;
				// flex-direction: column;
				// justify-content: center;
				// align-items: center;

				.number {
					font-size: 80rpx;
					font-weight: 700;
					color: #ffffff;
					line-height: 104rpx;
					text-align: center;

					text {
						font-size: 28rpx;
						font-weight: 500;
						color: #ffffff;
						line-height: 40rpx;
					}
				}
			}
		}

		.change-list {
			// background: #ffffff;
			padding: 30rpx 24rpx;

			.change-item {
				margin-bottom: 24rpx;
				background: #ffffff;
				border-radius: 24upx;

				.item {
					padding: 32rpx 32rpx;

					.head {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 26rpx;

						.left {
							font-size: 30rpx;
							color: #333333;
							line-height: 30rpx;
						}

						.right {
							font-size: 36rpx;
							font-weight: 500;
							color: #de0c19;
							line-height: 36rpx;
						}
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;

						view {
							font-size: 26rpx;
							color: #999999;
							line-height: 26rpx;
						}
					}
				}
			}
		}
	}
</style>